import React, { Component } from 'react'

import './FormCom.css'

export default class FormCom extends Component {

  // 创建头像ref
  imgRef = React.createRef()

  // 状态数据
  state = {
    name: '',
    username: "", // 文本输入框
    userpass: "", // 密码输入框
    gender: "男", // 单选框
    age: 0,       // 数值输入框
    addr: "",     // 下拉列表
    fav: [],      // 复选框
    info: "",     // 文本域
    img: ""       // 头像
  }

  changeName() {
    this.setState({
      name: "大牧"
    })
  }

  // 文件域
  getImg() {
    console.log(this.imgRef.current.files[0], "头像域DOM对象")
    // 给表单变量赋值图片二进制对象【结合DOM操作】
    this.setState({
      img: this.imgRef.current.files[0]
    })
  }

  // 复选框，需要进行判断赋值
  changeFav(value) {
    // 判断是否包含value(正在选择的值)
    if (this.state.fav.includes(value)) {
      // 包含，去掉
      this.state.fav = this.state.fav.filter(item => item !== value)
    } else {
      // 没有包含，添加
      this.state.fav.push(value)
    }
    console.log(this.state.fav, "爱好")
    // 刷新页面
    this.setState({
      fav: [...this.state.fav]
    })
  }

  render() {
    return (
      <div className="form-container">
        <h3>表单处理</h3>
        <h4>1. 数据双向绑定</h4>
        <div>
          <p>表单数据：{this.state.name}</p>
          <button onClick={this.changeName.bind(this)}>修改name数据</button>
          <input type="text" name="name" id="name"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })} />
        </div>
        <h4>2. 常见表单元素</h4>
        <div>
          <p>账号：{this.state.username}</p>
          <input type="text" name="username" id="username"
            value={this.state.username}
            onChange={e => this.setState({ username: e.target.value })} />
        </div>
        <div>
          <p>密码：{this.state.userpass}</p>
          <input type="password" name="userpass" id="userpass"
            value={this.state.userpass}
            onChange={e => this.setState({ userpass: e.target.value })} />
        </div>
        <div>
          <p>性别：{this.state.gender}</p>
          <input type="radio" name="gender" value="男"
            onChange={e => this.setState({ gender: e.target.value })} /> 男
          <input type="radio" name="gender" value="女"
            onChange={e => this.setState({ gender: e.target.value })} /> 女
        </div>
        <div>
          <p>年龄：{this.state.age}</p>
          <input type="number" name="age" id="age"
            value={this.state.age}
            onChange={e => this.setState({ age: e.target.value })} />
        </div>
        <div>
          <p>地址：{this.state.addr}</p>
          <select name="addr" id="addr" onChange={e => this.setState({ addr: e.target.value })}>
            <option value="郑州">郑州</option>
            <option value="上海">上海</option>
            <option value="杭州">杭州</option>
            <option value="嘉兴">嘉兴</option>
          </select>
        </div>
        <div>
          <p>爱好：{this.state.fav}</p>
          <input type="checkbox" name="fav" value="飞车"
            onChange={e => this.changeFav(e.target.value)} />飞车
          <input type="checkbox" name="fav" value="炫舞"
            onChange={e => this.changeFav(e.target.value)} />炫舞
          <input type="checkbox" name="fav" value="听歌"
            onChange={e => this.changeFav(e.target.value)} />听歌
          <input type="checkbox" name="fav" value="旅游"
            onChange={e => this.changeFav(e.target.value)} />旅游
        </div>
        <div>
          <p>个人介绍：{this.state.info}</p>
          <textarea name="info" id="info" cols="30" rows="10"
            value={this.state.info}
            onChange={e => this.setState({ info: e.target.value })}></textarea>
        </div>
        <div>
          <p>头像：</p>
          <input type="file" name="img" id="img"
            ref={this.imgRef}
            onChange={this.getImg.bind(this)} />
        </div>
      </div>
    )
  }
}
